<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>通讯录</title>
    <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../static/css/select.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="../../../static/js/jquery.js"></script>

    <script type="text/javascript" src="../../../static/js/jquery.idTabs.min.js"></script>
    <script type="text/javascript" src="../../../static/js/select-ui.min.js"></script>
    <script type="text/javascript" src="../../../static/editor/kindeditor.js"></script>
    <script type="text/javascript" src="../../../static/js/vue.js"></script>
    <script type="text/javascript" src="../../../static/js/axios.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function (e) {
            $(".select1").uedSelect({
                width: 200
            });

        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            /*$(".click").click(function () {
                $(".tip").fadeIn(200);
            });*/

            $(".tiptop a").click(function () {
                $(".tip").fadeOut(200);
            });

            /* $(".sure").click(function () {
                 $(".tip").fadeOut(100);
             });*/

            $(".cancel").click(function () {
                $(".tip").fadeOut(100);
            });

        });
    </script>

</head>

<body>

<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">个人办公</a></li>
        <li><a href="#">公司通讯录</a></li>
    </ul>
</div>

<div class="rightinfo" id="contactslist">

    <ul class="prosearch">
        <li>
            <label>查询：</label>
            <i>员工编号</i>
            <a>
                <input name="meetRoomName" id="staffId" type="text" class="scinput"/>
            </a>
            <i>员工姓名</i>
            <a>
                <input name="meetRoomName" id="name" type="text" class="scinput"/>
            </a>
            <i>部门</i>
            <a>
                <select class="select1" name="deptId" id="deptId">
                    <option value="">请选择</option>
                    <option v-for="dept in deptlist" v-bind:value="dept.id" v-bind:selected="dept.id==nowDeptId">{{dept.deptName}}</option>
                </select>
            </a>
        </li>
        <a>
            <input name="" type="button" class="sure" @click="lunbo(1)" value="查询"/>
            <input name="" type="button" class="sure" @click="toExcel()" value="导出"/>
        </a>
    </ul>

    <div class="formtitle1"><span>通讯录列表</span></div>

    <table class="tablelist">
        <thead>
        <tr>
            <!--  <th>
                  <input name="" type="checkbox" value="" checked="checked"/>
              </th>-->
            <th>员工编号</th>
            <th>员工姓名</th>
            <th>所属部门</th>
            <th>联系方式</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="thStaff in messages">
            <!-- <td>
                 <input name="" type="checkbox" value=""/>
             </td>-->
            <td>{{thStaff.staffId}}</td>
            <td>{{thStaff.name}}</td>
            <td>{{thStaff.deptName}}</td>
            <td>{{thStaff.tel}}</td>
        </tr>
        </tbody>
    </table>

    <div class="pagin">
        <div class="message">共<i class="blue">{{pageModel.totalRows}}</i>条记录，当前显示第&nbsp;<i
                class="blue">{{pageModel.pageNum}}&nbsp;</i>页
        </div>
        <!--总页数大于7页的时候-->
        <ul class="paginList" v-if="pageModel.totalPage>7">
            <li class="paginItem"><a href="javascript:;"
                                     @click="lunbo(pageModel.pageNum==1?1:pageModel.pageNum-1)"><span
                    v-bind:class="pageModel.pageNum==1?'pagepre':'pagepre0'"></span></a></li>
            <!--第一个格子-->

            <li v-bind:class="pageModel.pageNum==1?'paginItem current':'paginItem'">
                <a href="javascript:;" @click="lunbo(1)">1</a>
            </li>

            <!--第二个格子-->
            <li class="paginItem" v-if="(pageModel.pageNum> pageModel.totalPage-5) && (pageModel.pageNum>5) "><a
                    href="javascript:;">...</a></li>
            <li v-bind:class="pageModel.pageNum==2?'paginItem current':'paginItem'"
                v-if="(pageModel.pageNum<=5) || (pageModel.pageNum<=pageModel.totalPage-5 && pageModel.pageNum>5)">
                <a href="javascript:;" @click="lunbo(2)">2</a>
            </li>

            <!--第三个格子-->
            <li class="paginItem" v-if="5<pageModel.pageNum && pageModel.pageNum<=(pageModel.totalPage-5)"><a
                    href="javascript:;">...</a></li>
            <li v-bind:class="pageModel.pageNum==3?'paginItem current':'paginItem'" v-if="pageModel.pageNum<=5">
                <a href="javascript:;" @click="lunbo(3)">3</a></li>
            <li v-bind:class="pageModel.pageNum==(pageModel.totalPage-4)?'paginItem current':'paginItem'"
                v-if="(pageModel.pageNum>pageModel.totalPage-5) && (pageModel.pageNum>5)"><a href="javascript:;"
                                                                                             @click="lunbo(pageModel.totalPage-4)">{{pageModel.totalPage - 4}}</a>
            </li>

            <!--第四个格子-->
            <li v-bind:class="pageModel.pageNum==4?'paginItem current':'paginItem'" v-if="pageModel.pageNum<=5">
                <a href="javascript:;" @click="lunbo(4)">4</a></li>
            <li class="paginItem current"
                v-if="5<pageModel.pageNum && pageModel.pageNum<=(pageModel.totalPage-5)"><a href="javascript:;">{{pageModel.pageNum}}</a>
            </li>
            <li v-bind:class="pageModel.pageNum==(pageModel.totalPage-3)?'paginItem current':'paginItem'"
                v-if="(pageModel.pageNum>pageModel.totalPage-5) && (pageModel.pageNum>5)"><a href="javascript:;"
                                                                                             @click="lunbo(pageModel.totalPage-3)">{{pageModel.totalPage - 3}}</a>
            </li>

            <!--第五个格子-->
            <li v-bind:class="pageModel.pageNum==5?'paginItem current':'paginItem'" v-if="pageModel.pageNum<=5">
                <a href="javascript:;" @click="lunbo(5)">5</a></li>
            <li class="paginItem" v-if="5<pageModel.pageNum && pageModel.pageNum<=(pageModel.totalPage-5)"><a
                    href="javascript:;">...</a></li>
            <li v-bind:class="pageModel.pageNum==(pageModel.totalPage-2)?'paginItem current':'paginItem'"
                v-if="(pageModel.pageNum>pageModel.totalPage-5) && (pageModel.pageNum>5)"><a href="javascript:;"
                                                                                             @click="lunbo(pageModel.totalPage-2)">{{pageModel.totalPage - 2}}</a>
            </li>

            <!--第六个格子-->
            <li class="paginItem" v-if="pageModel.pageNum<=5"><a href="javascript:;">...</a></li>
            <li v-bind:class="pageModel.pageNum==(pageModel.totalPage-1)?'paginItem current':'paginItem'"
                v-if="pageModel.pageNum>5"><a href="javascript:;"
                                              @click="lunbo(pageModel.totalPage-1)">{{pageModel.totalPage - 1}}</a>
            </li>

            <!--第七个格子-->
            <li v-bind:class="pageModel.pageNum==pageModel.totalPage?'paginItem current':'paginItem'"><a
                    href="javascript:;" @click="lunbo(pageModel.totalPage)">{{pageModel.totalPage}}</a></li>

            <!--        <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>-->
            <li class="paginItem"><a href="javascript:;"
                                     @click="lunbo(pageModel.pageNum==pageModel.totalPage?pageModel.totalPage:pageModel.pageNum+1)"><span
                    v-bind:class="pageModel.pageNum==pageModel.totalPage?'pagenxt0':'pagenxt'"></span></a></li>
        </ul>
        <!--总页数小于8页的时候-->
        <ul class="paginList" v-if="pageModel.totalPage<=7">
            <li class="paginItem"><a href="javascript:;"
                                     @click="lunbo(pageModel.pageNum==1?1:pageModel.pageNum-1)"><span
                    v-bind:class="pageModel.pageNum==1?'pagepre':'pagepre0'"></span></a></li>

            <li v-for="index of pageModel.totalPage" :key="index"
                v-bind:class="index == pageModel.pageNum?'paginItem current':'paginItem'">
                <a href="javascript:;" @click="lunbo(index)">{{index}}</a>
            </li>

            <li class="paginItem"><a href="javascript:;"
                                     @click="lunbo(pageModel.pageNum==pageModel.totalPage?pageModel.totalPage:pageModel.pageNum+1)"><span
                    v-bind:class="pageModel.pageNum==pageModel.totalPage?'pagenxt0':'pagenxt'"></span></a></li>
        </ul>
    </div>

    <div class="tip">
        <div class="tiptop"><span>提示信息</span>
            <a></a>
        </div>

        <div class="tipinfo">
            <span><img src="../../../static/images/ticon.png"/></span>
            <div class="tipright">
                <p>是否确认对信息的删除 ？</p>
                <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
            </div>
        </div>

        <div class="tipbtn">
            <input name="" type="button" class="sure" value="确定"/>&nbsp;
            <input name="" type="button" class="cancel" value="取消"/>
        </div>

    </div>

</div>

<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');




    var vm = new Vue({
        el: "#contactslist",
        data:
            {
                nowDeptId: '',
                deptlist: '',
                messages: '',
                pageModel: '',
            },
        methods: {
            send() {
                var staffId = $("#staffId").val();
                var name = $("#name").val();
                var deptId = $("#deptId").val();
                axios({
                    method: 'post',
                    url: 'http://localhost:8099/tbStaff/list',
                    params: {
                        "staffId": staffId,
                        "name": name,
                        "deptId": deptId,
                        "pageNum": this.pageModel.pageNum,
                        "pageSize": this.pageModel.pageSize,
                    },
                }).then(function (res) {
                    vm.messages = res.data.data;
                    vm.pageModel = res.data;
                }).catch(function (reason) {
                    console.log(reason);
                })
            },
            lunbo: function (ele) {
                vm.pageModel.pageNum = ele;
                vm.nowDeptId= $("#deptId").val();
                this.send();
            },
            getDeptList:function (){
                axios({
                    method: 'post',
                    url: 'http://localhost:8099/tbStaff/getFdept',
                }).then(function (res) {
                    vm.deptlist = res.data;
                }).catch(function (reason) {
                    console.log(reason);
                })
            },
            toExcel(){
                var staffId = $("#staffId").val();
                var name = $("#name").val();
                var deptId = $("#deptId").val();
                window.location.href="http://localhost:8099/tbStaff/download?staffId="+staffId+"&name="+name+"&deptId="+deptId+"&pageNum="+vm.pageModel.pageNum+"&pageSize="+vm.pageModel.pageSize;
            },
        },
        //页面加载完自动执行
        mounted() {
            this.getDeptList();
            this.send();
        }
    });
</script>

</body>

</html>